<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register2.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.jsp">登录</a>
    </div>
    <form id="reg-form" action="/FieldBookSystem/registerUser" method="post">

        <table>
            <tr>
                <td>用户账号</td>
                <td class="inputs">
                    <input name="userid" type="text" id="userid">
                    <br>
                    <span id="userid_err" class="err_msg" style="color: red">${userid_err}</span>
                </td>

            </tr>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td class="inputs">
                    <input name="phone" type="text" id="phone" placeholder="xxx xxxx xxxx...">
                    <br>
                </td>

            </tr>
            <tr>
                <td>性 别</td>
                <td class="inputs">
                    <input name="sex" type="radio" id="man" value="男" checked> 男
                    <input name="sex" type="radio" id="woman" value="女"> 女
                </td>
            </tr>

            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img id="checkCodeImg" src="/FieldBookSystem/checkCodeServlet">
                    <a href="#" id="changeImg">看不清？</a>
                        <%--<span id="code_err" class="err_msg" style="color: red">${code_err}</span>--%>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>
<script>
    //给超链接绑定单击事件，由于请求会缓存，所以每次刷新要想生成不同的验证码需要在请求头添加不重复的数据 time
    document.getElementById("changeImg").onclick = function () {
        document.getElementById("checkCodeImg").src = "/FieldBookSystem/checkCodeServlet?"+new Date().getMilliseconds();
    }
    document.getElementById("reg_btn").onclick=function (){

        if(document.getElementById("username").value==""){
            alert("用户名不能为空！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }else if(document.getElementById("phone").value==""){
            alert("请输入电话号码！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else if(document.getElementById("password").value==""){
            alert("请输入密码！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else if(document.getElementById("userid").value==""){
            alert("请输入用户id！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else if(!/^[A-Za-z0-9]*$/.test(document.getElementById("password").value)){
            alert("密码格式错误!!");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }

        else if(document.getElementById("userid").value.length!=7&&document.getElementById("username").value.length!=8||!/^[A-Za-z0-9]*$/.test(document.getElementById("userid").value)){
            alert("用户id格式错误！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else if(document.getElementById("phone").value.length!=11|| !/^\d+$/.test(document.getElementById("phone").value)){
            alert("电话号码格式错误！");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else if(!/^[A-Za-z0-9]*$/.test(document.getElementById("userid").value)){
            alert("用户id格式错误!!");
            document.getElementById("reg-form").onsubmit=function (){return false};
        }
        else{
            document.getElementById("reg-form").onsubmit=function (){return true};
        }
    }


</script>
</body>
</html>